<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JNU AIlab</title>
<style>
	*{
	 padding: 0;
	 margin: 0;
	}
	html,body{
		height: 100%;
	}
	@font-face {
		font-family: miaohao;
		src: url("./asset/3.otf");
	}
	@font-face {
		font-family: miaohao2;
		src: url("./asset/2.ttf");
	}
	.div0{
		font-family: miaohao;
		font-size: 1.5625rem;
		font-weight: bold;
		position: absolute;
		line-height: 2.8125rem;
		padding-left: 1.875rem;
		background-color: #0F6A7B;
		width: 100%;
		z-index: -1;
		color: white;
	}
	.active{
	  background-color: rgba(0,0,0,0.3) ;
	  border-radius: 0.625rem;
	}
	ol{
		display: flex;
		justify-content: flex-end;
		margin-right: 3.125rem;
		z-index: 1;
	}
	ol>input{
		margin: 0.625rem 1.25rem;
		border: none;
		background-color: transparent;
		font-size: 1.25rem;
		color: white;
		padding-bottom: 0.3125rem;
		font-family: miaohao2;
	}
	ol>input:hover{
		background-color: rgba(0,0,0,0.3) ;
		border-radius: 0.625rem;
	}
	#main{
		height: 100%;
	}
	#div1{
		height: 100%;
	}
	.nimu{
		height: calc(100% - 2.8125rem);
		width: 100%;
		background-color: wheat;
		display: none;
	}
	.mumber{
		display: flex;
		flex-direction: column;
	}
	.mumber>div{
		width: 100%;
		height: 1.875rem;
	}
</style>
<script>
		window.onload=function(){//原生js选项卡写法
		var oDiv = document.getElementById('div1');
		var aInput = document.querySelectorAll('ol>input');
		var aCon = document.getElementsByClassName('nimu');
		for(var i=0;i<aInput.length;i++){
			aInput[i].index = i;
			aInput[i].onclick = function(){
			for(var i=0;i<aInput.length;i++){
				aInput[i].className = '';
				aCon[i].style.display = 'none';
			}
		this.className= 'active';
		aCon[this.index].style.display = 'block';
		}
	}
  }
</script>
</head>
	<body>
		<div id="main">
		<div class="div0">
			暨南大学智慧教育研究院
		</div>
		<div id="div1">
			<ol>
			  <input class="active" type="button" value="最新消息" />
			  <input type="button" value="发表论文"/>
			  <input type="button" value="培养文件"/>
			</ol>
			<div class="nimu" style="display: block;">
					
			</div>
			<div class="nimu">
				关于论文发表的注意事项：
				<a href="https://gitee.com/k2dais/jnu-ailab/raw/master/document/%E8%AE%BA%E6%96%87%E5%86%99%E4%BD%9C%EF%BC%88Ver%201.1(1).pptx" download="https://gitee.com/k2dais/jnu-ailab/raw/master/document/%E8%AE%BA%E6%96%87%E5%86%99%E4%BD%9C%EF%BC%88Ver%201.1(1).pptx">点击下载</a>
			</div>
			<div class="nimu">
				3333333
			</div>
		</div>
	</body>
</html>